{include file="public/header"}

<style>
    .mainPage .contentBoxs{
        padding: 10px 15px;
    }
    .headGoBackBox{
        padding: 0 5px;
        box-sizing: border-box;
    }
    /* 资料下载 */
    .downloadBox{
        width: 100%;
        height: auto;
        /* padding: 10px 15px; */
        box-sizing: border-box;
        padding-top: 10px;
    }
    .downloadBox .searchBoxs{
        width: 100%;
        height: 40px;
        display: flex;
    }
    .downloadBox .searchBoxs .searchInput{
        flex: 1;
        height: 100%;
        font-size: 0.28rem;
        width: calc(100% - 75px);
        border-radius: 100px;
        box-sizing: border-box;
        outline: none;
        border: 1px solid rgba(0,0,0,0.15);
        background-color: rgba(255,255,255,0.8);
        padding: 0 10px;
        box-sizing: border-box;
    }
    .downloadBox .searchBoxs .searchInput::-webkit-input-placeholder{font-size: 0.26rem;}
    .downloadBox .searchBoxs .seazrchBtn{
        flex: none;
        width: 65px;
        height: 36px;
        margin-top: 2px;
        background-color: rgba(0,0,0,0.3);
        border-radius: 100px;
        font-size: 0.28rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        letter-spacing: 2px;
        margin-left: 10px;
    }

    .downloadContent{
        width: 100%;
        height: auto;
        background-color: rgba(255,255,255,1);
        margin-top: 15px;
        font-size: 0.28rem;
        border-radius: 10px;
        height: auto;
        padding-top: 10px;
        padding-bottom: 0.2rem;
        padding-left: 40px;
        padding-right: 7px;
        box-sizing: border-box;
    }
    .downloadContent .downList{
        width: 100%;
        height: auto;
        border-bottom: 1px solid #eee;
        display: flex;
        position: relative;
        padding: 15px 0;
    }
    .downloadContent .downList .number{
        flex: none;
        position: absolute;
        right: 100%;
        margin-right: 1px;
        line-height: 22px;
        top: 15px;
    }
    .downloadContent .downList .name{
        flex: 1;
        line-height: 22px;
        padding-right: 10px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .downloadContent .downList .btnBox{
        flex: none;
        display: flex;
    }
    .downloadContent .downList .btnBox .btn{
        margin-left: 10px;
        height: 24px;
        line-height: 24px;
        width: auto;
        padding: 0 7px;
        border-radius: 3px;
        font-size: 0.26rem;
        letter-spacing: 1px;
        background-color: rgba(135,107,17,0.52);
        color: #fff;
    }
    .downloadContent .downList .btnBox .btn.btn1{
        box-shadow: 0 0 0.34rem 0px rgb(57 75 173 / 30%) inset;
        color: #394b8f;
        background-color: #fff;
    }
    .downloadContent .notText{
        width: calc(100% + 40px);
        height: auto;
        padding: 18px 0 5px 0;
        text-align: center;
        margin-left: -40px;
        font-size: 0.24rem;
        color: #555;
    }


    /* 点击图片放大 */
    .maxImg{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.8);
        z-index: 10;
    }
    .maxImg .imgB{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .maxImg .imgB .imgss{
        max-width: 100%;
        max-height: 100%;
        align-items: center;
        margin: auto;
    }

    .maxImg .textBox{
        width: 100%;
        height: 100%;
        padding: 20px 15px 50px 15px;
        box-sizing: border-box;
        background-color: #fff;
        overflow: auto;
        position: relative;
    }
    .closeText{
        width: calc(100% - 30px);
        position: absolute;
        text-align: center;
        font-size: 0.3rem;
        padding-top: 10px;
    }
    .nullText{
        width: calc(100% - 33px);
        height: auto;
        padding: 15px 0;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.3rem;
        color: #555;
    }

</style>

<div id="index">
			
    <div class="mainPage">
        <div class="contentBoxs">
            <div class="bgBox" :style="{minHeight: winHeight}"></div>
            <div style="position: relative;z-index: 8;">
                <div class="headGoBackBox">
                    <div class="headTitle">产品资料详情</div>
                    <div class="backBtn" @click="goBack">
                        <div class="goBackI"><img src="/public/static/mobile/image/goBackIcon.png" style="width: 100%;"></div>
                        <div class="goBackT">返回</div>
                    </div>
                    
                    <div style="flex: 1;"></div>
                </div>
               
                <div class="downloadBox">
                    <!-- 搜索 -->
                    <div class="searchBoxs">
                        <input class="searchInput" placeholder="输入资料名称搜索" v-model="searchText">
                        <div class="seazrchBtn" v-on:click="searchBtn(3000)">搜索</div>
                    </div>

                    <!-- 列表 -->
                    <div class="downloadContent" v-if="dataList.length>0">

                        <div class="downList" v-for="(item,index) in dataList" >
                            <div class="number">{{index<=8 ? '0'+(index+1) : index+1}}、</div>
                            <div class="name">{{item.name}}</div>
                            <div class="btnBox">

                                <!-- <div class="btn btn1" v-if="item.type != 'pdf'" @click="viewFun(item.type,item.url,item.ext)">预览</div> -->
                                <div class="btn btn1" v-if="item.type != 'zip'" @click="viewFun(item.type,item.url,item.ext)">预览</div>

                                <!-- <a class="btn btn1" v-if="item.type == 'pdf' && system=='ios'" target="_blank" :href="item.url">预览</a> -->
                                <!-- <a class="btn btn1" v-if="item.type == 'pdf'" :href="'/public/static/mobile/pdfh5-master/pdf.html?pdf='+item.url">预览</a> -->

                                <!-- <a class="btn btn2" :href="item.url" :download="item.name">下载</a> -->
                                <a class="btn btn2" target="_blank" :href="item.url">下载</a>
                            </div>
                        </div>
                       
                        <div class="notText">没有更多资料了~</div>
                    </div>

                    <div class="downloadContent" v-if="dataList.length<=0">
                        <div class="nullText">{{searchText=="" ? '该商品类别暂无资料~' : '没有您要搜索的资料~'}}</div>
                    </div>



                    <div style="font-size: 16px;display: none;">
                      <a href="/public/static/mobile/pdfh5-master/pdf.html?pdf=/public/static/mobile/image/pdf.pdf">预览pdf</a><br/><br/>
                      <a href="https://view.xdocin.com/xdoc?_xdoc=http://sh.36519.com/uploads/series_data/20211028/b8df55f3e011201c9b82c1cfc62525b3.jpg" target="_blank">预览图片</a><br/><br/>
                      <a href="https://view.xdocin.com/xdoc?_xdoc=http://sh.36519.com/uploads/series_data/20211028/e68525b1816db827825da161953b9990.mp4" target="_blank">预览视频</a><br/><br/>
                      <a href="https://view.xdocin.com/xdoc?_xdoc=http://sh.36519.com/uploads/series_data/20211029/51d301b158ec45df3c0e0a5108e933f4.pdf" target="_blank">预览PDF</a><br/><br/>
                      <a href="https://view.xdocin.com/xdoc?_xdoc=http://sh.36519.com/uploads/series_data/20211028/2d8c2d1e683f8356dc6168dbcbce47c3.docx" target="_blank">预览word</a><br/><br/>
                      <a href="https://view.xdocin.com/xdoc?_xdoc=http://sh.36519.com/uploads/series_data/20211028/d46a640644898a2f1822f78456c8a53f.txt" target="_blank">预览txt</a><br/><br/>
                      <a href="https://view.xdocin.com/xdoc?_xdoc=http://sh.36519.com/uploads/series_data/20211029/613e5eb23d3e1a9fc34300d97fcfb63a.xlsx" target="_blank">预览excel</a><br/><br/>
                      <a href="https://view.xdocin.com/xdoc?_xdoc=http://sh.36519.com/uploads/series_data/20211029/5e8d69d2bd7e3229277be4e2f83aaca6.pptx" target="_blank">预览PPT</a>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>

    <!-- 图片预览弹窗 -->
    <div class="maxImg" v-if="maxImgBox" @touchmove.prevent>
        <div class="imgB" @click="closeImg">
            <img :src="maxImgSrc" class="imgss"/>
        </div>
    </div>

    <!-- 视频预览弹窗 -->
    <div class="maxImg" v-if="maxVideoBox" @touchmove.prevent>
        <div class="imgB" @click="closeImg">
            <video :src="maxVideoSrc" controls="controls" width="100%" height="auto" autoplay="autoplay"></video>
        </div>
    </div>

    <!-- txt预览弹窗 -->
    <!-- <div class="maxImg" v-if="maxTxtBox"  @touchmove.prevent>
        <div class="textBox">
            <iframe class="filename" :src="txtSrc" width='98%' height='95%' frameborder='1' style="background-color: #fff;border: 0;"></iframe>
            <div class="closeText" @click="closeImg">关闭</div>
        </div>
    </div> -->

    <!-- pdf预览弹窗 -->
    <!-- <div class="maxImg" v-if="maxPdfBox"  @touchmove.prevent>
        <div class="textBox">
            <iframe class="filename" :src="pdfSrc" width='98%' height='95%' frameborder='1' style="background-color: #fff;border: 0;"></iframe>
            <div class="closeText" @click="closeImg">关闭</div>
        </div>
    </div> -->

</div>



<script type = "text/javascript">
    new Vue({
	  	el: '#index',
	  	data: function () {
            return {
                winHeight:document.documentElement.clientHeight+"px",

                system:"",   //终端系统

                maxImgBox:false,  //预览图片的弹窗
                maxImgSrc:"",  //预览图片的地址

                maxVideoBox:false,  //预览视频的弹窗
                maxVideoSrc:"",  //预览视频的地址

                maxPdfBox:false,  //预览pdf的弹窗
                pdfSrc:"",  //预览pdf的地址

                maxTxtBox:false,  //预览txt的弹窗
                txtSrc:"",  //预览txt的地址

                // real_sn:real_sn,  //真实sn
                searchText:"",   //搜索的文字
                lastTime:0, //默认上一次点击时间为0    

                dataList:[
                    // {
                    //     type:"img",
                    //     url:"/public/static/images/bj2.png",
                    //     name:"资料详情上传资料的名称png",
                    // },
                    // {
                    //     type:"video",
                    //     url:"/public/static/mobile/image/aa.mp4",
                    //     name:"资料详情上传资料的名称mp4",
                    // },
                    // {
                    //     type:"pdf",
                    //     url:"/public/static/mobile/image/pdf.pdf",
                    //     name:"pdf资料详情上传资料的名称资料详情上传资料的名称资料详情上传资料的名称",
                    // },
                    // {
                    //     type:"word",
                    //     url:"/public/static/mobile/image/word.docx",
                    //     name:"资料详情上传资料的名称word",
                    // },
                    // {
                    //     type:"excel",
                    //     url:"/public/static/mobile/image/excel.xlsx",
                    //     name:"资料详情上传资料的名称excel",
                    // },
                    // {
                    //     type:"txt",
                    //     url:"/public/static/mobile/image/text.txt",
                    //     name:"资料详情上传资料的名称txt",
                    // },
                    // {
                    //     type:"img",
                    //     url:"/public/static/images/img1.png",
                    //     name:"资料详情上传资料的名称资料详情上传资料的名称资料详情上传资料的名称",
                    // }
                ]
            }
        },
        // 创建页面
		created(){
            var _this=this;

            const category = navigator.userAgent;
            const isAndroid = category.indexOf('Android') > -1 || category.indexOf('Adr') > -1; //android终端
            const isiOS = !!category.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

            if(isAndroid){
                // alert("android");、
                _this.system="android";
            }else if(isiOS){
                // alert("ios");
                _this.system="ios";
            }

            // 获取上一页面的参数
            var sn = decodeURI(window.location.href.split("?")[1]);
            _this.sn=sn.slice(3);
            // console.log(_this.sn);
            _this.getData();


        },
        methods: {
            //   返回
			goBack(){
				window.history.back(-1); 
			},
            // 预览
            viewFun(type,url,ext){
                // console.log(type);
                if(type=="img"){
                    this.maxImgSrc=url;
                    this.maxImgBox=true;
                }else if(type=="video"){
                    this.maxVideoSrc=url;
                    this.maxVideoBox=true;
                }else if(type=="pdf"){
                    // this.txtSrc=url;
                    // this.maxTxtBox=true;
                    // location.href="/public/static/mobile/pdfh5-master/pdf.html?pdf="+url;
                    window.open("/public/static/mobile/pdfh5-master/pdf.html?pdf="+url,"_blank");
                }else{
                    // alert(ext+"格式暂不支持预览，请下载。");
                    window.open("https://view.xdocin.com/xdoc?_xdoc=http://sh.36519.com"+url,"_blank");
                }


                
            },
			//  点击关闭图片弹窗
			closeImg(){
				this.maxImgBox=false;
				this.maxVideoBox=false;
                this.maxTxtBox=false;
                this.maxPdfBox=false;
			},

            // 搜索按钮防止快速点击
			searchBtn(intervalTime){
				//获取当前时间的时间戳
				let now = new Date().valueOf();
				if(this.lastTime == 0 || (now-this.lastTime) > intervalTime){
					//重置上一次点击时间，intervalTime是我自己设置的间隔时间，根据自己的需要传参
					this.lastTime = now;
					// console.log('间隔大于2秒，触发方法');
					this.getData();
					//添加自己要调用的方法
				}else{
					console.log('3秒内连续点击按钮，不触发');
				}
			},

            // 获取页面数据
            getData:function(){
                var _this=this;
                console.log( _this.sn);
                axios.get('/api/mobile/getseriesdata', {
                    params: { sn: _this.sn , search:_this.searchText}
                })
                .then(function (res) {
                    // console.log(res.data);
                    if(res.data.status==1){
                        _this.dataList=res.data.list;
                    }
                    
                }).catch(function (error) {
                    console.log(error);
                });
            },


        }
    })

</script>


{include file="public/footer"}
